<template>
  <div class="order-detail">
    <header class="header">
      <div class="back-button" @click="goBack">
        <span>&lt;</span>
      </div>
      <h1>订单详情</h1>
      <div class="right-icons">
        <span class="icon">⋯</span>
      </div>
    </header>

    <div v-if="order" class="order-content">
      <div class="order-status">
        <div class="status-icon" :class="getStatusClass(order.status)">
          <span v-if="order.status === '待服务'">🕒</span>
          <span v-else-if="order.status === '进行中'">🔄</span>
          <span v-else-if="order.status === '已完成'">✅</span>
          <span v-else-if="order.status === '已取消'">❌</span>
        </div>
        <div class="status-text">
          <div class="status">{{ order.status }}</div>
          <div class="status-desc" v-if="order.status === '待服务'">护士将按预约时间上门服务</div>
          <div class="status-desc" v-else-if="order.status === '进行中'">护士正在为您提供服务</div>
          <div class="status-desc" v-else-if="order.status === '已完成'">服务已完成，感谢您的使用</div>
          <div class="status-desc" v-else-if="order.status === '已取消'">订单已取消</div>
        </div>
      </div>

      <div class="order-section">
        <div class="section-title">服务信息</div>
        <div class="info-item">
          <span class="label">服务项目</span>
          <span class="value">{{ order.serviceName }}</span>
        </div>
        <div class="info-item">
          <span class="label">服务时间</span>
          <span class="value">{{ order.serviceDate }} {{ order.serviceTime }}</span>
        </div>
        <div class="info-item">
          <span class="label">服务地址</span>
          <span class="value">{{ order.address }}</span>
        </div>
      </div>

      <div class="order-section">
        <div class="section-title">患者信息</div>
        <div class="info-item">
          <span class="label">姓名</span>
          <span class="value">{{ order.patientName }}</span>
        </div>
        <div class="info-item">
          <span class="label">联系电话</span>
          <span class="value">{{ order.phone }}</span>
        </div>
        <div class="info-item" v-if="order.notes">
          <span class="label">备注</span>
          <span class="value">{{ order.notes }}</span>
        </div>
      </div>

      <div class="order-section">
        <div class="section-title">订单信息</div>
        <div class="info-item">
          <span class="label">订单编号</span>
          <span class="value">{{ order.id }}</span>
        </div>
        <div class="info-item">
          <span class="label">下单时间</span>
          <span class="value">{{ formatDate(order.createdAt) }}</span>
        </div>
        <div class="info-item">
          <span class="label">支付金额</span>
          <span class="value price">¥{{ order.price }}</span>
        </div>
      </div>

      <div class="action-buttons" v-if="order.status === '待服务'">
        <button class="cancel-btn" @click="cancelOrder">取消订单</button>
        <button class="contact-btn">联系客服</button>
      </div>
    </div>

    <div v-else class="empty-state">
      <div class="empty-icon">🔍</div>
      <div class="empty-text">订单不存在或已被删除</div>
      <button class="back-btn" @click="goBack">返回</button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps, defineEmits } from 'vue';

const props = defineProps({
  orderId: {
    type: String,
    required: true
  }
});

const emit = defineEmits(['go-back', 'order-updated']);

const order = ref(null);

onMounted(() => {
  loadOrderDetails();
});

const loadOrderDetails = () => {
  try {
    const savedOrders = JSON.parse(localStorage.getItem('nurseOrders') || '[]');
    const foundOrder = savedOrders.find(o => o.id === props.orderId);
    order.value = foundOrder || null;
  } catch (error) {
    console.error('加载订单详情失败:', error);
    order.value = null;
  }
};

const formatDate = (dateString) => {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  const hours = String(date.getHours()).padStart(2, '0');
  const minutes = String(date.getMinutes()).padStart(2, '0');
  
  return `${year}-${month}-${day} ${hours}:${minutes}`;
};

const getStatusClass = (status) => {
  switch (status) {
    case '待服务':
      return 'status-pending';
    case '进行中':
      return 'status-ongoing';
    case '已完成':
      return 'status-completed';
    case '已取消':
      return 'status-cancelled';
    default:
      return '';
  }
};

const cancelOrder = () => {
  if (confirm('确定要取消此订单吗？')) {
    try {
      let savedOrders = JSON.parse(localStorage.getItem('nurseOrders') || '[]');
      const orderIndex = savedOrders.findIndex(o => o.id === props.orderId);
      
      if (orderIndex !== -1) {
        savedOrders[orderIndex].status = '已取消';
        localStorage.setItem('nurseOrders', JSON.stringify(savedOrders));
        order.value.status = '已取消';
        emit('order-updated');
      }
    } catch (error) {
      console.error('取消订单失败:', error);
    }
  }
};

const goBack = () => {
  emit('go-back');
};
</script>

<style scoped>
.order-detail {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  max-width: 750px;
  margin: 0 auto;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  background-color: #00a163;
  color: white;
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
}

.back-button {
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header h1 {
  font-size: 18px;
  margin: 0;
  flex: 1;
  text-align: center;
}

.right-icons {
  width: 30px;
  text-align: right;
}

.order-content {
  padding-bottom: 70px;
}

.order-status {
  display: flex;
  align-items: center;
  background-color: #00a163;
  color: white;
  padding: 20px 15px;
}

.status-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  margin-right: 15px;
}

.status-text {
  flex: 1;
}

.status {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 5px;
}

.status-desc {
  font-size: 14px;
  opacity: 0.8;
}

.order-section {
  background-color: white;
  margin: 10px 0;
  padding: 15px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
  color: #333;
}

.info-item {
  display: flex;
  margin-bottom: 10px;
}

.label {
  width: 80px;
  color: #666;
  font-size: 14px;
}

.value {
  flex: 1;
  font-size: 14px;
}

.price {
  color: #ff4d4f;
  font-weight: bold;
}

.action-buttons {
  display: flex;
  padding: 15px;
  gap: 10px;
}

.cancel-btn, .contact-btn {
  flex: 1;
  padding: 12px 0;
  border-radius: 20px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.cancel-btn {
  background-color: white;
  border: 1px solid #ddd;
  color: #333;
}

.contact-btn {
  background-color: #00a163;
  color: white;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 50px 0;
  color: #999;
}

.empty-icon {
  font-size: 60px;
  margin-bottom: 20px;
}

.empty-text {
  font-size: 16px;
  margin-bottom: 20px;
}

.back-btn {
  padding: 10px 30px;
  background-color: #00a163;
  color: white;
  border: none;
  border-radius: 20px;
  font-size: 16px;
}

.status-pending .status-icon {
  color: #ff9500;
}

.status-ongoing .status-icon {
  color: #007aff;
}

.status-completed .status-icon {
  color: #4cd964;
}

.status-cancelled .status-icon {
  color: #999;
}
</style> 